<template>
	<view class="content">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;padding: 0 16rpx;box-sizing: border-box;">
			<view style="box-sizing: border-box;" @click="goBack">
				<view style="border: 2rpx solid #E5E6E8;border-radius: 24rpx;background-color: #FFF;">
					<image style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;" src="/static/images/icon/left-icon.png"></image>
				</view>
			</view>
			<view style="color: #232426;font-size: 32rpx;font-weight: 500;">
				選擇服務地址
			</view>
			<view @click="checkAddr" style="color: #27C5D6;font-size: 28rpx;font-weight:400;">
				選擇
			</view>
		</view>
		<view style="margin-top: 24rpx; width: 100%;box-sizing: border-box;padding: 0 30rpx;">
			
			<view>
				<u-radio-group
					v-model="addressId"
					placement="column"
				    @change="groupChange"
				>
					<view v-for="(item, index) in addressList" :key="index" class="list-item">
						<view class="list-item-left">
							<view class="list-item-icon">
								<u-radio
								    :name="item.id"
									activeColor="#27C5D6"
									@change="radioChange"
									size="32"
									iconSize="28"
								>
								</u-radio>
							</view>
							<view class="item-title" @click="checkItem(item.id, index)">
								{{ item.country }}{{ item.city }}{{ item.street }}{{ item.room }}
							</view>
						</view>
						<view class="list-item-right">
							<view class="list-item-icon" @click="del(item.id)">
								<u-icon
									name="trash"
									size="40rpx"
								></u-icon>
							</view>
							<view class="list-item-icon" @click="edit(index)">
								<u-icon
									name="edit-pen"
									size="40rpx"
								></u-icon>
							</view>
							
						</view>
					</view>
					
					<view class="list-item">
						<view class="list-item-left" @click="add">
							<view class="list-item-icon">
								<u-icon 
									name="plus-circle"
									size="40rpx"
								></u-icon>
							</view>
							<view>
								新增服務地址
							</view>
						</view>
						<view class="list-item-right">
							
						</view>
					</view>
				</u-radio-group>
			</view>
		</view>
	
	</view>
</template>

<script>
	import { addressList, addressAdd, addressEdit, addressDel} from '@/config/api.js';
	
	export default {
		data() {
			return {
				id:0,
				addressList:[],
				addressId:0,
				indexId:0
			}
		},
		components: {
			
		},
		onLoad(option) {
			this.getData()
		},
		methods:{
			goBack(){
				uni.navigateBack();
			},
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			checkItem(id, index){
				this.addressId = id;
				this.indexId   = index;
			},
			getData(){
				let that = this;
				uni.showLoading({
					title: '加載中...'
				})
				let parames = {}
				addressList(parames).then((res) => {
					//success
					const arr = []
					for(let i in res){
						arr.push({
							id:res[i].id,
							country:res[i].country,
							city:res[i].city,
							street:res[i].address,
							room:res[i].floor,
							maps:res[i].channel_map
						});
					}
					that.addressList = arr;
					uni.hideLoading();
				}).catch((e) =>{
					console.log('error', e)
					uni.hideLoading();
				})
			},
			add(){
				let that = this;
				uni.navigateTo({
					url: '/pages/demand/address',
					events: {
						// 定义接收事件
						acceptData: (data) => {
							console.log('接受的数据:', data.data);
							that.saveAdd(data.data)
						}
					},
					success: (res) => {
						// 向B页面传递初始数据（可选）
						res.eventChannel.emit('initData', { type:'myaddress_add' });
					}
				});
			},
			saveAdd(data){
				uni.showLoading({
					title: '保存中...'
				})
				let that = this;
				let userInfo = uni.getStorageSync('userInfo');
				let parames = {
					country:data.countryName,
					city:data.cityName,
					address:data.street,
					floor:data.room,
					channel_map:data.latitude + ','+data.longitude,
					area:data.countryName + '/' + data.cityName
				}
				addressAdd(parames).then((res) => {
					console.log('sucess', res)
					//success
					that.getData()
					uni.hideLoading();
				}).catch((e) =>{
					console.log('error', e)
					uni.hideLoading();
				})
			},
			del(id){
				let that = this;
				uni.showModal({
					title: '確認刪除此地址？',
					content: '刪除將無法恢復，請確認',
					confirmText:'確認',
					confirmColor:'#27C5D6',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.submitDel(id)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			submitDel(id){
				let that = this;
				uni.showLoading({
					title: '删除中...'
				})
				let parames = {
					id:id
				}
				addressDel(parames).then((res) => {
					console.log('sucess', res)
					//success
					that.getData()
					uni.hideLoading();
				}).catch((e) =>{
					console.log('error', e)
					uni.hideLoading();
				})
			},
			edit(index){
				
				let that = this;
				let info = this.addressList[index];
				
				const coordinateStr = info.maps;
				const [latitude, longitude] = coordinateStr.split(',').map(Number);
				
				uni.navigateTo({
					url: '/pages/demand/address',
					events: {
						// 定义接收事件
						acceptData: (data) => {
							console.log('接受的数据:', data);
							that.saveEdit(info.id, data.data)
						}
					},
					success: (res) => {
						// 向B页面传递初始数据（可选）
						res.eventChannel.emit('initData', {
							country:info.country,
							city:info.city,
							street:info.street,
							room:info.room,
							latitude:latitude,
							longitude:longitude,
						});
					}
				});
			},
			saveEdit(id, data){
				uni.showLoading({
					title: '保存中...'
				})
				let that = this;
				let userInfo = uni.getStorageSync('userInfo');
				let parames = {
					id:id,
					country:data.countryName,
					city:data.cityName,
					address:data.street,
					floor:data.room,
					channel_map:data.latitude + ','+data.longitude,
					area:data.countryName + '/' + data.cityName
				}
				addressEdit(parames).then((res) => {
					console.log('sucess', res)
					//success
					that.getData()
					uni.hideLoading();
				}).catch((e) =>{
					console.log('error', e)
					uni.hideLoading();
				})
			},
			//確認選擇地址
			checkAddr(){
				if( this.addressId == 0 ){
					uni.showToast({
						icon:'none',
						title:'請選擇地址'
					})
					return;
				}
				let info = this.addressList[this.indexId]
				let data = {
					address:info.country+info.city+info.street+info.room,
					maps:info.maps
				}
				
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('acceptData', { 
					// 发送数据
					data:data
				});
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		background-color: #F6F8FA;
		min-height: 100vh;
	}
	.list-item{
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 34rpx 24rpx;
		background-color: #FFF;
		margin-top: 2rpx;
		align-items: center;
		
		.list-item-left{
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
		.list-item-right{
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}
		
		.list-item-icon{
			margin: 0 12rpx;
		}
		
	}
	
	.list-item:first-of-type{
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
	}
	.list-item:last-of-type{
		border-bottom-left-radius: 24rpx;
		border-bottom-right-radius: 24rpx;
	}
</style>